import { X } from 'lucide-react';

interface TagBadgeProps {
  tag: string;
  onClick?: () => void;
  onRemove?: () => void;
  size?: 'sm' | 'md';
  interactive?: boolean;
}

const TAG_COLORS = [
  'bg-emerald-100 text-emerald-800 border-emerald-200 hover:bg-emerald-200',
  'bg-blue-100 text-blue-800 border-blue-200 hover:bg-blue-200',
  'bg-purple-100 text-purple-800 border-purple-200 hover:bg-purple-200',
  'bg-orange-100 text-orange-800 border-orange-200 hover:bg-orange-200',
  'bg-pink-100 text-pink-800 border-pink-200 hover:bg-pink-200',
  'bg-indigo-100 text-indigo-800 border-indigo-200 hover:bg-indigo-200',
  'bg-teal-100 text-teal-800 border-teal-200 hover:bg-teal-200',
  'bg-amber-100 text-amber-800 border-amber-200 hover:bg-amber-200',
];

const getTagColor = (tag: string) => {
  const hash = tag.split('').reduce((a, b) => {
    a = ((a << 5) - a) + b.charCodeAt(0);
    return a & a;
  }, 0);
  return TAG_COLORS[Math.abs(hash) % TAG_COLORS.length];
};

export const TagBadge = ({ 
  tag, 
  onClick, 
  onRemove, 
  size = 'sm', 
  interactive = false 
}: TagBadgeProps) => {
  const colorClass = getTagColor(tag);
  const sizeClass = size === 'md' ? 'px-3 py-1.5 text-sm' : 'px-2 py-1 text-xs';
  
  const baseClass = `inline-flex items-center gap-1 rounded-full font-medium border transition-colors ${
    sizeClass
  } ${
    colorClass
  } ${
    interactive || onClick ? 'cursor-pointer' : ''
  }`;

  const content = (
    <>
      <span>{tag}</span>
      {onRemove && (
        <button
          type="button"
          onClick={(e) => {
            e.stopPropagation();
            onRemove();
          }}
          className="hover:bg-black/10 rounded-full p-0.5 transition-colors"
        >
          <X className={size === 'md' ? 'w-3.5 h-3.5' : 'w-3 h-3'} />
        </button>
      )}
    </>
  );

  if (onClick) {
    return (
      <button
        type="button"
        onClick={onClick}
        className={baseClass}
      >
        {content}
      </button>
    );
  }

  return (
    <span className={baseClass}>
      {content}
    </span>
  );
};